<template>
  <div class="zn-wrapper">
    <div class="zn-op-header">
      <el-button type='primary' size="small" icon="el-icon-plus" @click="addGoodsClick" v-if="btn['添加']">{{$t('goods.addGoods')}}</el-button>
    </div>
    <div class="zn-search-header">
      <el-form>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="商品分类" size="small">
              <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="商品分类" size="small">
              <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="商品分类" size="small">
              <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="请搜索" size="small">
              <el-input placeholder="ID/名称/编号/条码/商户名称" v-model="params.keywords" class="input-with-select">
                <el-button @click = "btnQuery" slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="zn-main">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID">
        </el-table-column>
        <el-table-column prop="goodsName" label="商品名称">
        </el-table-column>
        <el-table-column prop="picture" label="商品图片">
          <template slot-scope="scoped">
            <div class="good-detail">
              <div class="good-pic">
                <img :src="scoped.row.picture" alt="">
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="商品价格">
        </el-table-column>
        <el-table-column prop="stock" label="库存">
        </el-table-column>
        <el-table-column prop="op" label="操作" class-name="op-item">
          <template slot-scope="scoped">
            <el-button type="primary" size="mini" @click="updateClick(scope.row)" v-if="btn['修改']">
              {{$t('common.edit')}}
            </el-button>
            <el-button  size="mini" type="danger" @click="deleteClick(scope.row)" v-if="btn['删除']">
              {{$t('common.del')}}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination :total="params.total" :page.sync="params.pageNo" :limit.sync="params.pageSize" @pagination="btnQuery" />
  </div>
</template>

<script>
  import {productList} from "@/api/good.service.js";
  import Pagination from '@/components/Pagination'
  import local from './local';

  export default {
    components: {Pagination},
    data() {
      return {
        tableData: [],
        params:{
          keywords:'',
          pageNo:1,
          pageSize:20,
          total:0,
        },
        options:[],
        value:''
      };
    },
    computed: {
      btn() {
        return JSON.parse(localStorage.getItem('btn'))[this.$route.name] || []
      }
    },
    created() {
      this.$i18n.mergeLocaleMessage('en', local.en)
      this.$i18n.mergeLocaleMessage('zh', local.zh)
      this.$i18n.mergeLocaleMessage('ko', local.ko)
    },
    mounted(){
      this.queryTableData()
    },
    methods: {
      btnQuery(){
        this.queryTableData()
      },
      queryTableData(){
        this.tableData = []
        productList(this.params).then(res=>{
          if(res.code==200){
            this.tableData = res.values
          }
          this.params.total = res.total
        })
      },

      addGoodsClick(){
        this.$router.push('/system/goods/add');
      }
    },

  };
</script>

<style scoped>
  .zn-search-header {
    padding: 20px 0;
  }
  .good-detail {
    position: relative;
    padding-left: 80px;
    min-height: 80px;
  }
  .good-detail .good-pic {
    position: absolute;
    left: 0;
    top: 0;
  }
  .good-detail .good-pic img {
    height: 80px;
    width: 80px;
    padding: 1px;
    border: 1px solid #efefef;
  }
  .good-detail .good-content {
    width: 260px;
    padding: 10px;
    /* text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; */
  }
</style>

<style>
  /* .zn-search-header .el-form-item {
    margin-right: 20px;
  } */

  .zn-main .el-table__header-wrapper .cell {
    font-weight: normal;
    color: #000;
  }
  
</style>

